<template>
    <div>
        <CommonData title="累计订单量" :total="orderToday">
            <template v-slot:chart>
                <div id="orderChart" style="width:100%;height:100%;">

                </div>
            </template>
            <template>
                <span>昨日订单总量</span>
                <span><b>&nbsp;&nbsp;{{ orderLastDay }}</b></span>
            </template>
        </CommonData>
    </div>
</template>

<script>
import topMixin from '@/mixin/topView'
import reportData from '@/mixin/reportData';
export default {
    mixins: [topMixin, reportData],
    mounted() {
        setTimeout(() => {
            let myChart = this.$echarts.init(document.getElementById('orderChart'));
            let options = {
                series: [
                    {
                        type: 'line',
                        data: this.orderTrend,
                        /* 设置线的面积 */
                        areaStyle: {
                            color: 'purple'
                        },
                        /* 设置线的样式 */
                        lineStyle: {
                            width: 0
                        },
                        /* 设置标点样式 */
                        itemStyle: {

                        },
                        showSymbol: false,
                        smooth: true
                    }
                ],
                xAxis: {
                    show: false,
                    type: 'category',
                    /* 将x轴距离容器的间距设置为0 */
                    boundaryGap: false
                },
                yAxis: {
                    show: false
                },
                /* 设置图形的大小 */
                grid: {
                    left: 0,
                    top: 0,
                    bottom: 0,
                    right: 0,
                }
            }
            myChart.setOption(options)
        }, 1000)
    }
}
</script>

<style lang="scss" scoped>

</style>